<template>
  <div class="app-container">
    <basics-form
      :minWidth="'300px'"
      ref="basicsForm"
      :actionLoading="loading"
      @actionBtnsClick="actionBtnsClick"
      @submit="search"
    />
    <el-table
      v-loading="tableLoading"
      :data="tableData"
      border
      stripe
      style="width: 100%"
    >
      <el-table-column prop="deptName" label="名称"> </el-table-column>
      <el-table-column prop="sysName" label="系统名称"> </el-table-column>
      <el-table-column prop="level" label="级别"> </el-table-column>
      <el-table-column label="省市区">
        <template slot-scope="scope">
          {{
            scope.row.provinceName +
            " " +
            scope.row.cityName +
            " " +
            scope.row.areaName
          }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="详细地址"> </el-table-column>
      <el-table-column
        label="logoImg"
        align="center"
        width="190px"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <img v-if="scope.row.logoImg" :src="scope.row.logoImg" style="width: 60px;cursor: pointer;"
           @click="picturePreview(scope.row.logoImg)"/>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="入驻时间"> </el-table-column>
      <el-table-column prop="leader" label="管理员"> </el-table-column>
      <el-table-column prop="phone" label="管理员手机号(账号)">
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="190px"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="showDetails(scope.row)"
            >修改</el-button
          >
          <el-popconfirm
            style="margin: 0 10px"
            title="确定删除吗？"
            @confirm="del(scope.row.deptId)"
          >
            <el-button
              slot="reference"
              size="mini"
              type="text"
              icon="el-icon-delete"
              >删除</el-button
            >
          </el-popconfirm>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-refresh-left"
            @click="setPwd(scope.row.deptId)"
            >重置密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="$refs.basicsForm.formValid()"
    />

    <el-dialog
      :title="item ? '修改' : '新增'"
      :visible.sync="openView"
      width="700px"
      append-to-body
    >
      <basics-form
        style="margin-left: 100px"
        ref="basicsAddForm"
        :titleAligin="'right'"
        :titleWidth="'150px'"
        :actionLoading="loading"
        @actionBtnsClick="addAction"
        @submit="addSubmit"
      />
    </el-dialog>
    <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>

<script>
import BasicsForm from "@/components/BasicsForm";
import {
  hospitalList,
  provinceList,
  listHospitalLevel,
  saveHospital,
  delHospital,
  resetPwdForHospital,
} from "@/api/manbing/hospital";
export default {
  name: "Hospital",
  components: { BasicsForm },
  data() {
    return {
      dialogVisible: false,
      dialogImageUrl:"",
      loading: false,
      tableLoading: false,
      openView: false, //新增医院弹出
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      tableData: [],
      provinces: null, //省市区列表
      levels: null, //医院等级列表
      item: null, //操作的医院
    };
  },
  created() {
    this.$nextTick(() => {
      this.initRules();
      this.getList();
    });
  },
  methods: {
    //顶部搜索组件
    initRules() {
      let rules = [
        {
          title: "关键字",
          key: "keyWord",
          placeholder: "医院名称/级别/省市区/地址",
          skip: true,
        },
        {
          type: "actionBtns",
          selectList: [
            { name: "搜索", value: "primary" },
            { name: "新增", value: "success" },
          ],
          ruleWidth: "auto",
        },
      ];
      this.$refs.basicsForm.initForm(rules);
    },
    //顶部按钮点击
    actionBtnsClick(index) {
      if (index == 1) {
        this.id = "";
        this.openView = true;
        this.item = null;
        this.$nextTick(() => {
          this.getProvinces();
        });
      } else {
        this.queryParams.pageNum = 1;
        this.$refs.basicsForm.formValid();
      }
    },
    //搜索
    search(param) {
      if (!param) {
        return;
      }
      for (let key in param) {
        this.queryParams[key] = param[key];
      }
      this.getList();
    },
    //列表数据
    getList() {
      this.loading = true;
      this.tableLoading = true;
      hospitalList(this.queryParams)
        .then((res) => {
          if (res.code == 200) {
            this.tableData = res.rows;
            this.total = res.total;
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
    //详情和编辑
    showDetails(item) {
      this.openView = true;
      this.item = item;
      this.$nextTick(() => {
        this.getProvinces();
      });
    },
    //省市区列表
    getProvinces() {
      if (this.provinces) {
        this.getLevels();
      } else {
        provinceList().then((res) => {
          if (res.code == 200) {
            this.provinces = res.data;
            this.getLevels();
          }
        });
      }
    },
    //医院等级列表
    getLevels() {
      if (this.levels) {
        this.initAddRules();
      } else {
        listHospitalLevel().then((res) => {
          if (res.code == 200) {
            this.levels = res.data;
            this.initAddRules();
          }
        });
      }
    },
    //构建新增/修改表单
    initAddRules() {
      console.log(this.levels,'-------');
      let item = this.item ? this.item : {};
      let rules = [
        {
          title: "名称",
          key: "deptName",
          value: item.deptName || "",
        }, {
          title: "系统名称",
          key: "sysName",
          value: item.sysName || "",
          skip: true,
        },
        {
          title: "级别",
          key: "level",
          type: "select",
          selectList: this.levels,
          value: item.level ? this.levels.indexOf(item.level) : "",
          skip: true,
        },
        {
          title: "省市区",
          key: "ssq",
          type: "cascader",
          cascaderProps: {
            children: "childs",
            label: "name",
            value: "name",
          },
          selectList: this.provinces,
          value: item.provinceName
            ? [item.provinceName, item.cityName, item.areaName]
            : [],
          skip: true,
        },
        {
          title: "详细地址",
          key: "address",
          type: "textarea",
          value: item.address || "",
          skip: true,
        },
        {
          title: "logo",
          key: "logoImg",
          type: "img",
          skip: true,
          uploadExtra: {
            uploadType: 1,
          },
          uploadAction:
          process.env.VUE_APP_BASE_API + "/chronicdisease/plat/uploadFile",
          value: item.logoImg || "",
        },
        {
          title: "管理员姓名",
          key: "leader",
          value: item.leader || "",
        },
        {
          title: "管理员手机号(账号)",
          key: "phone",
          maxlength: 11,
          ruleList: ["isMobile"],
          ruleMsgList: ["请输入正确的手机号码"],
          value: item.phone || "",
        },
        {
          title: "管理员登录密码",
          key: "pwd",
          ruleList: ["minLength:6"],
          ruleMsgList: ["登录密码至少6位"],
          hidden: item.deptId ? true : false,
        },
        {
          type: "actionBtns",
          selectList: [
            { name: "取消", value: "" },
            { name: "提交", value: "primary" },
          ],
          btnsAligin: "center",
          ruleWidth: "503px",
        },
      ];
      this.$refs.basicsAddForm.initForm(rules);
    },
    //新增表单的按钮点击事件
    addAction(index) {
      if (index) {
        this.$refs.basicsAddForm.formValid();
      } else {
        this.openView = false;
      }
    },
    //新增，发送请求
    addSubmit(param) {
      if (!param) {
        return;
      }
      param.provinceName = param.ssq[0];
      param.cityName = param.ssq[1];
      param.areaName = param.ssq[2];
      delete param.ssq;
      if (this.item) {
        param.deptId = this.item.deptId;
        delete param.pwd;
      }
       param.level = this.levels[param.level];
      this.loading = true;
      saveHospital(param)
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess(this.item ? "修改成功" : "新增成功");
            this.openView = false;
            this.getList();
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //删除
    del(deptId) {
      this.loading = true;
      this.tableLoading = true;
      delHospital({ deptId })
        .then((res) => {
          if (res.code == 200) {
            this.$modal.msgSuccess("删除成功");
            this.getList();
          }
        })
        .finally(() => {
          this.loading = false;
          this.tableLoading = false;
        });
    },
    //重置密码
    setPwd(deptId) {
      this.$prompt("请输入新密码", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /^\S{6,}$/,
        inputErrorMessage: "密码至少6位",
      }).then(({ value }) => {
        this.loading = true;
        this.tableLoading = true;
        resetPwdForHospital({ deptId, pwd: value })
          .then((res) => {
            if (res.code == 200) {
              this.$modal.msgSuccess("重置密码成功");
            }
          })
          .finally(() => {
            this.loading = false;
            this.tableLoading = false;
          });
      });
    },
    //文件预览
    picturePreview(url) {
      this.dialogImageUrl = url;
      this.dialogVisible = true;
    },
  },
};
</script>
<style scoped lang="scss">
</style>
